<template>
  <div class="container">
    <Headbar />
    <Header />
    <Nav />
    <div class="problems-box">
      <div class="problems-wrap yh-layout-box">
        <div class="problems-menu fl">
          <Menu />
        </div>
        <div class="problems-classify fl">
          <div class="help-crumb">
            <div class="help-crumb-content">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>帮助中心</el-breadcrumb-item>
                <el-breadcrumb-item>我是买家</el-breadcrumb-item>
                <el-breadcrumb-item>商品搜索</el-breadcrumb-item>
              </el-breadcrumb>
              <span class="find-statistics">找到符合条件的文章25篇</span>
            </div>
          </div>
          <div class="article-con">
            <ul class="article-ul">
              <li class="article-list" v-for="(item,i) in 20">我所在的地区支持货到付款吗？</li>


            </ul>
          </div>
        </div>
      </div>
    </div>
    <Footbars />
  </div>
</template>

<script>
import Header from './components/Header'
import Nav from './components/Nav'
import Menu from './components/Menu'
import Headbar from '@/components/Layouts/Headbar'
import Footbars from '@/components/Layouts/Footbars'
export default {
  name: 'HelpProblems',
  components: {
    Header,
    Nav,
    Menu,
    Headbar,
    Footbars,
  },
  data() {
    return {

    }
  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.problems-box{
  .problems-wrap{
    .problems-menu{
      width: 220px;
    }
    .problems-classify{
      width: 970px;
      min-height: 600px;
      background: #fff;
      border-radius: 10px;
      margin: 20px 0 20px 10px;
      .help-crumb{
        width: 100%;
        height: 48px;
        line-height: 48px;
        background: #E9E9E9;
        border-radius: 10px 10px 0 0;
        .help-crumb-content{
          max-width: 100%;
          height: 100%;
          color: #888;
          font-size: 14px;
          padding-left: 30px;
          vertical-align: top;
          .el-breadcrumb{
            display: inline-block;
            line-height: unset;
          }
        }
        .find-statistics{
          vertical-align: top;
          display: inline-block;
          height: 48px;
          line-height: 48px;
          margin-left: 15px;
        }
      }
      .article-con{
        .article-ul{
          margin-left: 40px;
          padding: 20px 0;
          .article-list{
            position: relative;
            padding-left: 10px;
            padding-right: 20px;
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .article-list::before{
            content: '';
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #333;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -2px;
          }
        }
      }
    }

  }
}
</style>
<style lang="scss">

.el-breadcrumb__item{
  .el-breadcrumb__inner{
    color: #888;
  }
}
.el-breadcrumb__item:last-child{
  .el-breadcrumb__inner{
    color: #888;
  }
}
</style>
